<template>
  <div class="real-time-data" style="height: 100%;width: 100%">
      <el-table :data="realTimeData" border  style="width: 100%; height: 100%">
        <el-table-column prop="position" label="位号" width="120"></el-table-column>
        <el-table-column prop="value" label="值" >
          <template #default="{ row }">
            {{ row.value }}
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script lang="ts">
import axios from 'axios'

interface RealTimeDataItem {
  position: string;
  value: number | string;
}

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();

    const activeTab = ref('realTimeData')
    let realTimeData = ref([
    ])

    let timer: any = null

    const fetchData = async () => {
      try {
        const response = await proxy.$api.PlcUrlc['read']();
        // 更新列表数据
        if (response && response.result !== null) {
          // 使用 spread 操作符来更新 realTimeData
          realTimeData.value = [
            { position: 'TC301-PV', value: response.plc1 },
            { position: 'TC302-PV', value: response.plc2 },
            { position: 'TC303-PV', value: response.plc3 },
            { position: 'F1301', value: response.plc4 },
            { position: 'F1302', value: response.plc5 },
            { position: 'F1303', value: response.plc6 },
            { position: 'HA301', value: response.plc7 },
            { position: '刷新时间', value: new Date().toLocaleString('zh-CN', { hour12: false, timeZone: 'Asia/Shanghai' }) }
          ];
        }
      } catch (error) {
        console.error('获取实时数据失败:', error);
      }
    };


    onMounted(() => {
      timer = setInterval(fetchData, 1000)
      fetchData() // 页面加载时先获取一次数据
    })

    onUnmounted(() => {
      clearInterval(timer)
    })

    return {
      activeTab,
      realTimeData
    }
  }
})
</script>

<style scoped>
.real-time-data {
  padding: 0px;
}
.custom-table th,
.custom-table td {
  padding: 1px 0; /* 减小上下内边距 */
  line-height: 1.2; /* 调整行高 */
}
</style>